<template>
	<view class="profile-container">
		<view class="profile-card">
			<view class="info-row">
				<text class="info-label">头像</text>
				<view class="info-content">
					<view class="head" @click="chooseAvatar">
						<image :src="userParams.avatar" mode="aspectFill" v-if="userParams.avatar"></image>
						<image v-else src="../../static/images/gugou/icon1.png"  mode="aspectFill"></image>
					</view>
				</view>
			</view>
		</view>
		

		<view class="profile-card">
			<view class="info-row">
				<text class="info-label">昵称</text>
				<view class="info-content">
					<input type="text"  v-model="userParams.nickName">
				</view>
			</view>
		</view>



		<view class="profile-card">
			<view class="info-row">
				<text class="info-label">性别</text>
				<view class="info-content">
					<view >
						<radio-group @change="radioChange" class="genderRadio">
							<label v-for="(item, index) in genderArr" :key="item.value" class="radioItem">
								<view>
									<radio :value="item.value" :checked="item.value === userInfo.sex" color="#8DC7DF" style="transform:scale(0.7)"/>
								</view>
								<view>{{item.name}}</view>
							</label>
						</radio-group>
					</view>
					
				</view>
			</view>
		</view>
		<view class="profile-card">
			<view class="info-row">
				<text class="info-label">手机号</text>
				<view class="info-content" @click="changePhone">{{userInfo.phone}} 
					<view class="changePhoneBtn">更换手机</view>
					<image src="../../static/icons/right.png" mode=""></image>
				</view>
			</view>
		</view>
		<!-- <view class="profile-card" @click="jumpToAddressPage">
			<view class="info-row">
				<text class="info-label">收货地址</text>
				<view class="info-content">{{ userInfo.address }}
					<image src="../../static/icons/right.png" mode=""></image>
				</view>
			</view>
		</view> -->

	</view>
	<view class="saveBtn" @click='updateUserInfo'>
		保 存
	</view>
	<view class="userOutBtn" @click="userLogout">
		退出登录
	</view>
</template>

<script>
	import {updateUserInfo,uploadImg,logOut} from '@/api/user.js'
	import { onShow } from '@dcloudio/uni-app';
	export default {
		async onShow() {
			this.userInfo = await uni.getStorageSync('userInfo');
			console.log(this.userInfo, '111')
			Object.assign(this.userParams,{
				avatar:this.userInfo.avatar,
				sex:this.userInfo.sex,
				nickName:this.userInfo.nickName
			})
		},
		data() {
			return {
				userInfo: {},
				genderArr:[
					{
						value:0,
						name:'保密'
					},
					{
						value:1,
						name:'男'
					},
					{
						value:2,
						name:'女'
					}
				],
				current: 0,
				userParams:{
				},
				phone:'',
			};
		},
		methods: {
			jumpToAddressPage() {
				uni.navigateTo({
					url: '/pages/address/address'
				});
			},
			changePhone(){
				uni.navigateTo({
					url:'/pages/my/phoneEdit'
				})
				
			},
			radioChange: function(evt) {
				this.userParams.sex = evt.detail.value;
				console.log(this.userParams.sex);
			},
			chooseAvatar(){
				let that=this
				uni.chooseMedia({
					count: 1,
					mediaType: ['image'],
					sourceType: ['album', 'camera'],
					success(res) {
						let locationCode=1
						let img=res.tempFiles[0].tempFilePath
						uploadImg(locationCode, img).then(res=>{
							let avatarurl=JSON.parse(res.data).data
							that.userParams.avatar=avatarurl
						})
					},
				})
			},
			updateUserInfo(){
				console.log(this.userParams)
				updateUserInfo(this.userParams).then(res=>{
					console.log(res)
					if (res?.data?.code == 200) {
						this.userInfo = res?.data?.data;
						uni.setStorageSync('userInfo',res?.data?.data);
						uni.setStorageSync('token', res?.data?.data?.token);
						uni.switchTab({
							url:'/pages/my/my'
						})
					}
				})
			},
			userLogout(){
				logOut().then(res=>{
					if(res.data.code==200){
						this.$store.dispatch('removeToken')
						uni.removeStorageSync('userInfo');
						setTimeout(()=>{
							uni.switchTab({
							url:'/pages/my/my'
						})
						},50)
						
						
					}
					
				})
				
			},
			// getValue(newphone){
			//     console.log(newphone,'B页面传递的数据')
			// 	this.phone=newphone
			// }
		},
		
		
	};
</script>

<style>
	.profile-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 40rpx 20rpx;
		box-shadow: 2px 1px 10px rgba(0, 0, 0, 0.2);
		border-radius: 20rpx;
	}

	.profile-card {
		background-color: #fff;
		width: 86vw;
		/* border-radius: 10px; */
		/* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
		/* border: 1px solid royalblue; */
		border-bottom: 1px solid #f5f5f5;
		padding: 10rpx;
		text-align: center;
		font-size: 34rpx;
		margin-top: 10rpx;
		/* margin-bottom: 10px; */
	}

	.info-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 10px;
	}

	.info-label {
		font-weight: 500;
		margin-right: 5px;
	}

	.info-content {
		color: #888;
		display: flex;
		align-items: center;
	}
	
	.info-content image{
		width: 30rpx;
		height: 30rpx;
	}
	.info-content input{
		text-align: right;
		padding-right: 20rpx;
	}
	.info-content .head {
		width: 150rpx;
		height: 150rpx;
		overflow: hidden;
		aspect-ratio: 1/1;
		border-radius: 50%;
		border: 1px solid #ebebeb;
		margin-right: 40rpx;
		/* background-color: #ccc; */
		background-size: cover;
	}
	
	.info-content .head image {
		width: 100%;
		height: 100%;
	}
	.genderRadio{
		display: flex;
		
	}
	.radioItem{
		display: flex;
		align-items: center;
		font-size: 28rpx;
		margin-right: 30rpx;
	}
	.changePhoneBtn{
		width: 100rpx;
		height: 50rpx;
		padding: 0;
		line-height: 50rpx;
		font-size: 20rpx;
		color: #8DC7DF;
		background-color: #fff;
		border: 1rpx solid #8DC7DF;
		border-radius: 20rpx;
	}
	.edit-button {
		margin-top: 20px;
	}
	.saveBtn,.userOutBtn{
		width: 92%;
		margin: 30rpx auto;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		color: #fff;
		font-size: 32rpx;
		border-radius: 6rpx;
		background-color: #8DC7DF;
		box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
	}
	.userOutBtn{
		background-color: #fff;
		font-size: 30rpx;
		color: #333;
		box-shadow: 2px 0px 6px rgba(0, 0, 0, 0.1);
	}
	/* ------------- */
	.uni-date-x--border{
		border: none!important;
	}
</style>
